<template>
    <div class="home">
        <img :src="img" alt="">

        <div class="card">
            <p class="cn">{{ cn }}</p>
            <p class="en">{{ en }}</p>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getInfo } from '@/api'

const img = ref('')
const en = ref('')
const cn = ref('')

onMounted(async () => {
    
    getInfo().then(res => {
        console.log('res index === ', res)
        en.value = res.data.dailyEng.data.en || ''
        cn.value = res.data.dailyEng.data.zh || ''
        img.value = res.data.dailyEng.data.pic || ''
    })

})
</script>

<style lang="scss" scoped>
.home {
    width: 100vw;
    height: calc(100vh - 50px);
    padding-top: 70px;
    background-image: linear-gradient(135deg, rgb(245, 247, 250, .5) 0%, rgb(195, 207, 226, .5) 100%);

    img {
        width: 90vw;
        height: 60vw;
        box-shadow: 0 0 3px #ccc;
        border-radius: 16px;
        object-fit: cover;
        background-color: #fff;
    }

    img {
        width: 90vw;
        height: 60vw;
        box-shadow: 0 0 3px #ccc;
        border-radius: 16px;
        object-fit: cover;
    }

    .card {
        width: 90vw;
        padding: 16px;
        border: 16px;
        box-shadow: 0 0 3px #ccc;
        background-color: #fff;
        border-radius: 16px;
        margin: 0 auto;
        box-sizing: border-box;
        margin-top: 16px;

        p {
            font-weight: 500;
            margin-bottom: 10px;
        }
    }
}
</style>